<template>
    <div>
        <el-config-provider :locale="zhCn">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">

                <el-row :gutter="24">
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="offer基本信息" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="发放时间" label-position="top" prop="distributionTime">
                                <el-input v-model="atime" placeholder="" clearable style="width: 260px;" disabled />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <el-form-item label="offer状态" label-position="top" prop="offerStatus">
                                <el-select v-model="OfferData" placeholder="选择状态" style="width: 260px">
                                    <template #label="{ label }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in OfferStatusData" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="候选人报道信息" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <el-form-item label="选择候选人" label-position="top" prop="applicantId">
                                <el-button type="primary" style="width: 260px;" @click="JobPopUpWindow">
                                    <icon-storage />{{ CandidateName }}
                                </el-button>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="所属需求编号" label-position="top">
                                <el-input v-model="ResumeRequirements" style="width: 260px;" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="简历信息" label-position="top">
                                <el-input v-model="TalentResumeID" style="width: 260px" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="候选人姓名" label-position="top">
                                <el-input v-model="CandidateName" style="width: 260px" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="offer岗位" label-position="top">
                                <el-input v-model="Position" style="width: 260px" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="入职部门" label-position="top">
                                <el-input v-model="deptName" style="width: 260px" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="手机号" label-position="top">
                                <el-input v-model="CellPhone" style="width: 260px" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="邮箱" label-position="top">
                                <el-input v-model="Mailbox" style="width: 260px" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="试用期" label-position="top" prop="probationPeriod">
                                <el-date-picker v-model="ProbationPeriod" type="datetime"
                                    date-format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="选择日期时间" style="width: 260px">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="试用期薪酬（元）" label-position="top" prop="probationarySalary">
                                <el-input v-model="ProbationarySalary" style="width: 260px" clearable />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="转正薪酬（元）" label-position="top" prop="salary">
                                <el-input v-model="Salary" style="width: 260px" clearable @input="handleSalaryInput" />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="报到日期" label-position="top" prop="reportedDate">
                                <el-date-picker v-model="ReportTime" type="datetime" date-format="YYYY/MM/DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间" style="width: 260px">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="报道地址" label-position="top" prop="reportingAddress">
                                <el-input v-model="ReportingAddress" placeholder="请输入内容" style="width: 260px;">
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="报道联系人" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="联系人姓名" label-position="top" prop="contactName">
                                <el-input v-model="ContactName" style="width: 260px" clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="联系人电话" label-position="top" prop="contactPhone">
                                <el-input v-model="ContactPhone" style="width: 260px" clearable />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="短信模板" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light">
                            <el-descriptions :column="1">
                                <el-descriptions-item label="">
                                    {{ CandidateName }} 先生/女士：
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    您好！
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    非常高兴地通知您，公司已决定录用您至 {{ deptName }} 部门任 {{ Position }}
                                    岗位。根据公司相关规定，您的薪酬及福利标准如下：试用薪酬（税前）
                                    ¥{{ ProbationarySalary }}；转正薪酬（税前） ¥{{ Salary }} 。
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    报到日期： {{ ReportTime }} （逾期未报到的，该offer将自动失效。）
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    报道地址 ：{{ ReportingAddress }} 。
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    附：为了您顺利地完成入职手续的办理，您还需提前准备如下资料并在入职当天提交：
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    1、两寸彩色照片一张；
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    2、离职证明；
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    3、身份证、学位证书复印件1份（身份证复印件2份）；
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    4、户口簿【首页+本人页】复印件1份；
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    5、工商银行卡【发放工资用】；
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    6、员工自备笔记本电脑。研发人员自备笔记本要求8G内存，SSD硬盘，如需公司配备请提前告知。
                                </el-descriptions-item>
                                <el-descriptions-item label="">
                                    7、医院体检报告。
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-col>
                </el-row>

                <div>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button @click="Cancel">取消</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-config-provider>
    </div>

    <el-dialog title="选择简历数据" v-model="IntentionDisplay" width="60%" destroy-on-close>
        <el-table :data="IntentionData" border>
            <el-table-column label="选择" width="60" fixed="left">
                <template #default="scope">
                    <el-radio v-model="selectedRowId" :label="scope.row.candidateid">
                        <span class="radio-custom"></span>
                    </el-radio>
                </template>
            </el-table-column>
            <el-table-column prop="resumeRequirements" label="需求编号" width="120" fixed="left" />
            <el-table-column prop="candidateid" label="简历编号" width="120" fixed="left" />
            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width">
            </el-table-column>
        </el-table>

        <template #footer>
            <span>
                <el-button @click="IntentionToCancel">取消</el-button>
                <el-button type="primary" @click="IntentionConfirmed">确认</el-button>
            </span>
        </template>
    </el-dialog>


</template>

<script setup>
import request from '@/api/request'
import { ref, defineEmits, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useRouter } from 'vue-router'

const getTime = new Date().getTime()
const time = new Date(getTime)

const router = useRouter()

function newDate(time) {
    const year = time.getFullYear()
    const month = time.getMonth() + 1
    const day = time.getDate()
    const hours = time.getHours()
    const minutes = time.getMinutes()
    const seconds = time.getSeconds()
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const atime = newDate(time)

const OfferData = ref("")
const OfferStatusData = ref([
    { value: '待入职', label: '已发放offer' }
])

const emit = defineEmits(['ref'])
const CandidateName = ref("选择简历数据")

const IntentionDisplay = ref(false)
const IntentionData = ref([])
const selectedRowId = ref(null)

const JobPopUpWindow = () => {
    IntentionDisplay.value = true

    request({
        url: '/candidateresume/selectCandidateResumesWithDeptStruct',
        method: 'get',
        params: { status: '待发offer' }
    })
        .then(res => {
            console.log("简历数据", res)
            IntentionData.value = res.data
            console.log("IntentionData.value获取的数据", IntentionData.value);

        })
}

const columns = [
    { id: "intendedPosition", label: '意向岗位', width: '160' },
    { id: "typeofjobapplication", label: '应聘类型', width: '160' },
    { id: "candidatename", label: '姓名', width: '160' },
    { id: "gender", label: '性别', width: '160' },
    { id: "cellPhone", label: '手机', width: '160' },
    { id: "mailbox", label: '邮箱', width: '160' },
    { id: "resumeStatus", label: '简历状态', width: '160' },
]

const IntentionToCancel = () => {
    IntentionDisplay.value = false
    router.go(-1)
}

const ResumeRequirements = ref('')
const TalentResumeID = ref("")
const CellPhone = ref("")
const Mailbox = ref("")
const Position = ref("")
const ReportTime = ref()
const deptName = ref("")
const Salary = ref("") //转正工资
const ProbationarySalary = ref("")
const ReportingAddress = ref("")
const ProbationPeriod = ref("")
const departmentId = ref("")
const ContactName = ref("")
const ContactPhone = ref("")

const IntentionConfirmed = () => {
    const selectedRow = IntentionData.value.find(row => row.candidateid === selectedRowId.value)
    if (selectedRow) {
        console.log('选中的数据:', selectedRow)
        ResumeRequirements.value = selectedRow.resumeRequirements
        TalentResumeID.value = selectedRow.candidateid
        CandidateName.value = selectedRow.candidatename
        CellPhone.value = selectedRow.cellPhone
        Mailbox.value = selectedRow.mailbox
        Position.value = selectedRow.intendedPosition
        deptName.value = selectedRow.department.deptName
        departmentId.value = selectedRow.department.deptId
        ContactName.value = selectedRow.candidatename
        ContactPhone.value = selectedRow.cellPhone
        Salary.value = selectedRow.departmentalStructure[0].baseSalary + selectedRow.departmentalStructure[0].bonus + selectedRow.departmentalStructure[0].housingAllowance + selectedRow.departmentalStructure[0].mealSubsidy + selectedRow.departmentalStructure[0].otherSubsidies + selectedRow.departmentalStructure[0].paySalary + selectedRow.departmentalStructure[0].seniorityWages + selectedRow.departmentalStructure[0].transportationSubsidy
        ProbationarySalary.value = (Salary.value * 0.8).toFixed(2)
    } else {
        ElMessage.error('未找到匹配的行')
    }

    IntentionDisplay.value = false
    router.go(-1)
}

// 表单引用
const formRef = ref()

// 添加处理薪资输入的函数
const handleSalaryInput = (value) => {
ProbationarySalary.value = (Salary.value * 0.8).toFixed(2)
  // 更新值
//   Salary.value = formattedValue
}

// 表单数据对象
const form = reactive({
    atime: atime,
    offerStatus: OfferData,
    theLocationNumber: ResumeRequirements,
    applicantId: TalentResumeID,
    recruitmentPositions: departmentId,
    reportedDate: ReportTime,
    salary: Salary,
    probationPeriod: ProbationPeriod,
    probationarySalary: ProbationarySalary,
    reportingAddress: ReportingAddress,
    submit: atime,
    distributionTime: atime,
    contactName: ContactName,
    contactPhone: ContactPhone,
    candidateName: CandidateName,
    departmentName: deptName,
    cellPhone: CellPhone,
    mailbox: Mailbox,
    position: Position
})

// 表单验证规则
const rules = reactive({
    offerStatus: [{ required: true, message: '请选择offer状态', trigger: 'change' }],
    applicantId: [{ required: true, message: '请选择候选人', trigger: 'change' }],
    theLocationNumber: [{ required: true, message: '请选择需求编号', trigger: 'change' }],
    recruitmentPositions: [{ required: true, message: '请选择入职部门', trigger: 'change' }],
    reportedDate: [{ required: true, message: '请选择报到日期', trigger: 'change' }],
    salary: [{ required: true, message: '请输入转正薪酬', trigger: 'blur' }],
    probationPeriod: [{ required: true, message: '请选择试用期', trigger: 'change' }],
    probationarySalary: [{ required: true, message: '请输入试用期薪酬', trigger: 'blur' }],
    reportingAddress: [{ required: true, message: '请输入报道地址', trigger: 'blur' }],
    contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
    contactPhone: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }]
})

const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            const formData = {
                atime: atime,
                offerStatus: OfferData.value,
                theLocationNumber: ResumeRequirements.value,
                applicantId: TalentResumeID.value,
                recruitmentPositions: departmentId.value,
                reportedDate: ReportTime.value,
                salary: Salary.value,
                probationPeriod: ProbationPeriod.value,
                probationarySalary: ProbationarySalary.value,
                reportingAddress: ReportingAddress.value,
                submit: atime,
                distributionTime: atime,
                contactName: ContactName.value,
                contactPhone: ContactPhone.value
            }

            console.log("保存的数据", formData)

            request({
                url: "/offermanagementtable/insert",
                method: 'post',
                data: formData
            }).then(res => {
                ElMessage.success('保存成功')
                const resumeData = {
                    candidateid: TalentResumeID.value,
                    resumeStatus: OfferData.value
                }
                request({
                    url: "/candidateresume/update",
                    method: 'post',
                    data: resumeData
                }).then(res => {
                    console.log("修改成功", res.data)
                    emit('ref')
                })
            }).catch(err => {
                ElMessage.error('保存失败')
            })
        } else {
            ElMessage.error('请填写所有必填项')
            return false
        }
    })
}

const Cancel = () => {
    router.go(-1)
}
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}

.form-footer {
    /* 将元素固定在浏览器视口的底部 */
    position: fixed;
    /* 元素距离底部 0 像素 */
    bottom: 0;
    /* 元素距离左侧 0 像素（占据整个水平方向） */
    left: 0;
    /* 元素宽度为视口的 100% */
    width: 100%;
    /* 设置白色背景色，防止内容穿透 */
    background-color: #ffffff;
    /* 设置 z-index 层级为 999，确保页脚始终显示在其他元素之上 */
    z-index: 999;
    /* 内边距为 10px*/
    padding: 10px;
    /* 添加阴影效果：水平偏移0，垂直偏移2px，模糊半径12px，颜色为半透明黑色 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}
</style>
